﻿/// <reference path="knockout-2.1.0.debug.js" />
/// <reference path="jquery-1.8.0.js" />
/// <reference path="underscore.js" />
/// <reference path="central.core.js" />
/// <reference path="central.utils.js" />

(function (ko, $) {
    ko.bindingHandlers.querybuilder = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var el = $(element),
                self = this, templates = new queryBuilderTempaltes(),
                valueUnwraped = ko.utils.unwrapObservable(valueAccessor()),
                filters = valueUnwraped.queryParams().Filters,
                groups = valueUnwraped.queryParams().Groups,
                sorters = valueUnwraped.queryParams().Sorters,
                container = document.createElement("DIV"),
                containerQueryParams = document.createElement("DIV"),
                containerGroups = document.createElement("DIV"),
                containerSorters = document.createElement("DIV"),
                containerFilters = document.createElement("DIV");

            $(container).addClass("ui-querybuilder");

            ko.renderTemplate("queryTemplate"/*templates.queryBuilderTemplate*/, valueUnwraped.queryParams, { /*templateEngine: stringTemplateEngine */ }, containerQueryParams, null);

            //$('body').append(templates.writeSomething());

            ko.renderTemplate("filterTemplate"/*templates.filterTemplate */, filters, { /*templateEngine: stringTemplateEngine */ }, containerFilters, null);
            ko.renderTemplate("sorterTemplate"/*templates.sorterTemplate */, sorters, { /*templateEngine: stringTemplateEngine */ }, containerSorters, null);
            ko.renderTemplate("grouperTemplate"/*templates.grouperTemplate*/, groups, { /*templateEngine: stringTemplateEngine */ }, containerGroups, null);

            $(container).append(containerQueryParams);
            $(container).append(containerFilters);
            $(container).append(containerSorters);
            $(container).append(containerGroups);

            el.html(container);

            return { "controlsDescendantBindings": true }
        }
    };

    var stringTemplate = function (key, template) {
        if (arguments.length === 1) {
            this.template = key;
        } else {
            this.templateName = key;
            this.template = template;
        }
    }

    stringTemplate.prototype.text = function () {
        return this.template;
    }

    var stringTemplateEngine = new ko.nativeTemplateEngine();
    stringTemplateEngine.makeTemplateSource = function (templateName) {
        return new stringTemplate(templateName);
    };

    var queryBuilderTempaltes = function () {
        var filterManagerTemplate = '\
                <script id="filterManagerTemplate" type="text/html">\
                    <div class="ui-querybuilder-level0">\
                        <span data-bind="text: LogicalOperator"></span>\
                        <div data-bind="foreach: FilterParams">\
                            <div class="ui-querybuilder-filter">\
                                <span data-bind="text: DisplayName, attr: {title: Name}"></span>\
                                <span data-bind="text: Operator"></span>\
                                <span data-bind="text: Value"></span>\
                                <span class="close"></span>\
                            </div>\
                        </div>\
                        <div data-bind="template : {\'name\': \'filterManagerTemplate\', foreach:  JsonFilterManagers}"></div>\
                    </div>\
                </script>',
            queryTemplate = '\
                <span data-bind="text: EntityName" class="ui-querybuilder-entityname">\
                </span>',
            filterTemplate = '\
                <span data-bind="text: LogicalOperator"></span>\
                    <div data-bind="foreach:  FilterParams">\
                        <div class="ui-querybuilder-filter">\
                            <span data-bind="text: DisplayName, attr: {title: Name}"></span>\
                            <span data-bind="text: Operator"></span>\
                            <span data-bind="text: Value"></span>\
                            <span class="close" data-bind="click: deleteFilter"></span>\
                        </div>\
                    </div>\
                    <div data-bind="foreach: JsonFilterManagers">\
                        <div class="ui-querybuilder-level0">\
                            <span data-bind="text:  LogicalOperator"></span>\
                            <div data-bind="foreach:  FilterParams">\
                                <div class="ui-querybuilder-filter">\
                                    <span data-bind="text: DisplayName, attr: {title: Name}"></span>\
                                    <span data-bind="text: Operator"></span>\
                                    <span data-bind="text: Value"></span>\
                                    <span class="close"></span>\
                                </div>\
                            </div>\
                            <div data-bind="template : {\'name\': \'filterManagerTemplate\', foreach:  JsonFilterManagers}"></div>\
                    </div>\
                </div>',
            sorterTemplate = '\
                <div>\
                    <span class="ui-querybuilder-title">Сортировка</span>\
                    <div data-bind="foreach: SortParams">\
                        <div class="ui-querybuilder-filter">\
                            <span data-bind="text: DisplayName, attr: {title: Name}"></span>\
                            <span class="close"></span>\
                        </div>\
                    </div>\
                </div>',
            grouperTemplate = '\
                <div>\
                    <span class="ui-querybuilder-title" data-bind="attr: {title: FieldNameForCount}">Группировка</span>\
                    <div data-bind="foreach: GroupParams">\
                        <div class="ui-querybuilder-filter">\
                            <span data-bind="text: DisplayName, attr: {title: FieldName}"></span>\
                            <span class="close"></span>\
                        </div>\
                    </div>\
                </div>',
            writeScript = function () {
                return filterManagerTemplate;
            };

        return {
            queryBuilderTemplate: queryTemplate,
            filterTemplate: filterTemplate,
            grouperTemplate: grouperTemplate,
            sorterTemplate: sorterTemplate,
            writeSomething: writeScript
        }
    }
})(ko, $);